<template>
	<view class="container">
		<view class="top"></view>
		<view class="list">
			<view class="item" v-for="(item,index) in 1" :key="index">
				<view class="left">
					<image class="avatar" :src="my.logo != null ? baseUrl+my.logo : defaultLogo" mode="widthFix"></image>
				</view>
				<view class="center">
					<view class="title">{{userName}}</view>
					<view class="tag" v-if="vipLevel === 0">当前未开通VIP</view>
					<view class="tag" v-if="vipLevel === 1">VIP</view>
					<view class="tag" v-if="vipLevel === 2">高级VIP</view>
				</view>
			</view>
		</view>
		<view class="open u-p-30">
			<text class="opencard">开通会员</text>
			<view class="tuijiancontent  u-flex u-row-center u-m-t-30">
				<view @click="chooseVip(index)" v-for="(item,index) in vipList" :key="index" class=" u-m-r-30" :class="{tuijian:current == index }">
					<text class="u-flex u-row-center vip u-p-t-20">{{item.vipName}}</text>
					<text class="u-flex u-row-center month">12个月</text>
					<text class="u-flex u-row-center money">￥{{item.normalPrice/100}}</text>
				</view>
			</view>

		</view>
		<u-radio-group class=" u-m-t-30 " style="width: 100%;display: flex;flex-direction: column;" v-model="radio">
		<view class="open u-flex u-row-between u-p-20">
			<view class="u-flex u-row-center">
				<image src="../../static/img/airpalyimg.png"></image>
				<text class="opencard u-m-l-30">支付宝</text>
			</view>
			<u-radio style="cursor: pointer;" name="支付宝"></u-radio>
		</view>
		<view class="open u-flex u-row-between u-p-20">
			<view class="u-flex u-row-center">
				<image src="../../static/img/wechatimg.png"></image>
				<text class="opencard u-m-l-30">微信</text>
			</view>
			<u-radio style="cursor: pointer;" name="微信"></u-radio>
		</view>
		</u-radio-group>
		<u-button class="button" @click="checkout">立即开通</u-button>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				payBody:{},
				vipLevel:0,
				order:[],
				wxdata:[],
				pay_money:0.00,
				payShow:false,
				payTypeCode:'wx',
				radio: '',
				current: 0,
				my: '',
				userName: '',
				baseUrl: this.$mConfig.baseUrl,
				defaultLogo: this.$mAssetsPath.defaultLogo,
				item: {
					id: 1,
					checked: true
				},
				item1: {
					id: 1,
					checked: false
				},
				// value: '',
				// num: 1699
				followLogo: this.$mAssetsPath.companyLogo,
				vipList:[]
			}
		},
		onLoad() {
			let userInfo = this.$store.state.userInfo;
			this.userInfo = userInfo;
			if (userInfo.name != undefined) {
				this.userName = userInfo.nickName
				this.vipLevel = userInfo.vipLevel
				if(userInfo.vipLevel == 1) this.current = 1;
			}
			this.getMyIndex();
			this.getVips();
			this.findUserOne();
		},
		methods: {
			chooseVip(e) {
				this.current = e;
			},
			async getMyIndex() {
				let result = await this.$apis.myIndex();
				this.my = result.data;
			},
			async getVips(){
				let {data} = await this.$apis.getVips();
				this.vipList = data;
			},
			async findUserOne(){
				let {data,code} = await this.$apis.findUserOne({id:this.$store.state.userInfo.id});
				this.userInfo = data;			
				if(code == 200){
					if (data.name != undefined) {
						this.userName = data.nickName != '' ? data.nickName :data.name
						this.vipLevel = data.vipLevel
						if(data.vipLevel == 1) this.current = 1;
					}
					this.$store.commit('SET_USERINFO', data);
				}
			},
			async checkout(){
				console.log(this.radio);
				if(this.radio === ''){
					uni.showToast({
						title:"请选择支付方式",
						icon:'none'
					})
					return;
				}
				var payMoney = this.vipList[this.current].discountPrice*100
				let wxdata = await this.$apis.wxPay({id:this.vipList[this.current].id,payMoney:payMoney,payMoneyType:2,payType:0,type:0,extraId:this.current+1});
				console.log(wxdata);
				this.pay(wxdata.data);
			},
			pay(wxdata) {
				let timestamp = wxdata.timestamp;
				let noncestr = wxdata.noncestr;
				let package1 = wxdata.package;
				let partnerid = wxdata.partnerid;
				let prepayid = wxdata.prepayid;
				let appid = wxdata.appid;
				let sign = wxdata.sign;
				var that = this;
				
				if(this.payTypeCode == 'zfb'){
					
					let orderInfo = wxdata;
					console.log(orderInfo);
					uni.requestPayment({
						provider: 'alipay',
						orderInfo: orderInfo, //微信、支付宝订单数据
						success: function (res) {
							setTimeout(function() {
								uni.navigateTo({
									url:"../user/myaccount?tab=shui"
								})
							}, 2000);
						},
						fail: function (err) {	
							console.log(err);								
							uni.showModal({
								 content: "支付失败或已取消支付",  
								 showCancel: false  
							 })
						}
					});
					
				
				}else if(this.payTypeCode == 'wx'){
					let orderInfo = {  
							appid: appid,  
							noncestr: noncestr,  
							package: package1,  
							partnerid: partnerid,  
							prepayid: prepayid,  
							timestamp: timestamp,  
							sign: sign
						};				
						uni.requestPayment({
							provider: "wxpay", 
							orderInfo: orderInfo,
							success:function(res){
								uni.showToast({ title: '支付成功', icon: 'success', duration: 2000 })
								this.vipLevel = this.current + 1;
								that.findUserOne();
								setTimeout(function() {
									uni.navigateBack({
										delta:1
									})
								}, 2000);
							},
							 fail:function(res){  							
								uni.showModal({  
									 content: "支付失败或已取消支付",  
									 showCancel: false  
								 }) 
							}
						 })				
				}
					
			
			}

		}
	}
</script>

<style scoped lang="scss">
	page,.container {
		background: #f4f4f4;
	}

	.container {
		position: relative;

		.top {
			width: 100%;
			height: 280rpx;
			background-image: url(../../static/img/openshipbg.png);
			background-size: 100% auto;
			// background-position: 0 bottom;
			background-position: 0 bottom;
			z-index: 0;
		}

		.list {
			position: absolute;
			top: 130rpx;
			z-index: 999;

			.item {
				border-bottom: #f4f4f4 solid 1upx;
				height: 154upx;
				width: 100%;
				display: flex;
				align-items: center;
				padding: 0upx 40upx 40upx;
				justify-content: space-between;

				.center {
					flex: 1;
					display: flex;
					flex-direction: column;
					justify-content: space-between;
					height: 100%;
					padding: 10upx 24upx;

					.title {
						color: #ffffff;
						font-size: 30rpx;
						font-weight: 500;
					}

					.tag {

						color: #C7A16A;

						width: fit-content;
						width: -webkit-fit-content;
						width: -moz-fit-content;
						padding: 20upx 4upx;
						font-size: 24upx;
						line-height: 24upx;
					}


				}



				.left {
					image {
						width: 102rpx;
						height: 118rpx;
					}
				}

				.picture {
					width: 44rpx;
					height: 44rpx;
					border: 1px dashed #AB61FF;
				}
			}
		}

		.open {
			background: #ffffff;
		}

		.opencard {
			font-size: 32rpx;
			color: #0D1D36;
		}

		.tuijiancontent {
			view {
				width: 312rpx;
				height: 332rpx;
				background: #FFF7F0;
				border-radius: 20rpx;
				line-height: 102rpx;
				border: 2rpx solid #F0F0F0;
				cursor: pointer;
			}

			.tuijian {
				border: 2rpx solid #FF6B4F;
			}
		}

		.tuijiancontent {


			.vip {
				font-size: 48rpx;
				color: #C7A16A;
			}

			.month {
				font-size: 36rpx;
				color: #666666;
			}

			.money {
				font-size: 30rpx;
				color: #FF6B4F;
			}


		}


		.open image {
			width: 54rpx;
			height: 54rpx;
			border: 1px solid dashed;
		}

		.button {
			width: 662rpx;
			margin: 150rpx auto 50rpx auto;
			background: #E4C279;
			border-radius: 40rpx;
			border: 0;
			font-size: 32rpx;
			color: #fff;

			&.u-hairline-border:after {
				border: 0;
			}
		}
	}

	.avatar {
		width: 110rpx;
		height: 127rpx;
		margin: 0 10rpx;
		border-radius: 55rpx;
	}
</style>
